<script setup>
import router from "@/router/index.js";

const gotoAllDishes = ()=>{
  router.push("/dishes")
}

const gotoCommunicationCommunity = ()=>{
  router.push("/Community")
}

const gotoSurveys = ()=>{
  router.push("/surveys")
}

const gotoRestaurant = ()=>{
  router.push("/restaurants")
}
const gotoReport = ()=>{
  router.push("/Report")
}

</script>

<template>
  <el-row style="margin: 10px">
    <el-col :span="3" class="row-menu"></el-col>
    <el-col :span="3" class="row-menu">
      <div class="row-menu full-content" @click="gotoAllDishes">
        全部菜品
      </div>
    </el-col>
    <el-col :span="3" class="row-menu">
      <div class="row-menu full-content" @click="gotoRestaurant">
        人气食堂
      </div>
    </el-col>
    <el-col :span="3" class="row-menu">
      <div class="row-menu full-content" @click="gotoSurveys">
        投票调查
      </div>
    </el-col>
    <el-col :span="3" class="row-menu">
      <div class="row-menu full-content" @click="gotoCommunicationCommunity">
        食物社区
      </div>
    </el-col>
    <el-col :span="3" class="row-menu">
      <div class="row-menu full-content" @click="gotoReport">
        投诉入口
      </div>
    </el-col>
    <el-col :span="3" class="row-menu">
        <div class="row-menu full-content" @click="gotoReport">
          全新功能
        </div>
    </el-col>
    <el-col :span="3" class="row-menu"></el-col>
  </el-row>
</template>

<style scoped>
.row-menu{
  background-color: cadetblue;
  font-size: 20px;
  color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  cursor: default;
}
.full-content:hover{
  background-color: #3E6768FF;
  cursor: pointer;
}
</style>